<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>EnterFrame</title>
  <style>
    #container {
      width: 650px;
    }

    canvas {
      border: 1px solid gray;
    }
  </style>
</head>

<body>
  <h1>EnterFrame</h1>
  <div id="container">
    <canvas id="world" width="300" height="300"></canvas>
  </div>

  <script src="../dist/stage.js"></script>
  <script>

    const stage = new stg.Stage('world', 40);
    const itemNum = 20;
    const itemList = [];
    const graphics = new stg.Graphics();
    const startX = 150;
    const startY = 150;
    let radius = 0;
    let radiusValue = 0.05;
    let radian = 0;

    graphics.fillStyle = '#F08';
    graphics.strokeStyle = '#903';
    graphics.lineWidth = 3;
    graphics.beginPath();
    graphics.arc(0, 0, 15, 0, Math.PI * 2, false);
    graphics.fill();
    graphics.stroke();

    for (let i = 0; i < itemNum; i += 1) {
      const item = new stg.Shape(graphics);
      item.x = startX;
      item.y = startY;
      stage.addChild(item);
      itemList.push(item);
    }

    stage.on(stg.Stage.ENTER_FRAME, () => {
      itemList.map((item, index) => {
        let theta = Math.PI * 2 * (index / itemNum) + radian;

        item.x = startX + radius * Math.cos(theta);
        item.y = startY + radius * Math.sin(theta);

        if (radius >= 80 || radius < 0) {
          radiusValue *= -1;
        }

        radian += 0.01;
        radius += radiusValue;
      });
    });

  </script>
</body>

</html>